<template>
  <div id="app">
    <header>
      <div class="titleArea">
        <img :src="winIcon" />
        <span>{{ winTitle }}</span>
      </div>
      <div class="featureArea">
        <div title="扩展" @click="expand">
          <span class="iconfont icon-xiakuozhanjiantou"></span>
        </div>
        <div title="最小化" @click="minimize">
          <span class="iconfont icon-minimum"></span>
        </div>
        <div :title="maximizeTitle" @click="maximize">
          <span
            :class="{
              iconfont: true,
              'icon-zuidahua': isMaximized,
              'icon-window-max_line': !isMaximized,
            }"
          ></span>
        </div>
        <div title="关闭" @click="close">
          <span class="iconfont icon-guanbi"></span>
        </div>
      </div>
    </header>
    <main>我是主体</main>
  </div>
</template>

<script>
export default {
  data: () => ({
    winIcon: `${process.env.BASE_URL}favicon.ico`,
    winTitle: process.env.VUE_APP_NAME,
    isMaximized: true,
  }),

  mounted() {
    //通过主进程改变窗体大小后的在渲染进程中的回调处理
    window.windowApi.resize(this.resize);
  },

  computed: {
    maximizeTitle() {
      return this.isMaximized ? "向下还原" : "最大化";
    },
  },

  methods: {
    //扩展
    expand() {
      this.$message({
        type: "success",
        message: "我点击了扩展",
      });
    },
    //最小化
    minimize() {
      window.windowApi.minimize();
    },
    //向下还原|最大化
    maximize() {
      window.windowApi.maximize();
    },
    // 窗口关闭
    close() {
      window.windowApi.close();
    },
    /**
     * 重置窗体大小后的回调函数
     * @param {事件源对象} event
     * @param {参数} args
     */
    resize(event, args) {
      this.isMaximized = args;
    },
  },
};
</script>

<style lang="scss">
$titleHeight: 40px;
$iconSize: 35px;
$featureAreaWidth: 140px; //功能区域宽度：功能图标的大小*功能按钮个数
body {
  margin: 0px;
}
#app {
  font-family: "微软雅黑";
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  header {
    background: #16407b;
    color: #8c8663;
    height: $titleHeight;
    width: 100%;
    display: flex;

    .titleArea {
      flex: 1;
      padding-left: 5px;
      display: flex;
      align-items: center;
      /* 允许拖拽 */
      -webkit-app-region: drag;

      img {
        width: 24px;
        height: 24px;
      }
      span {
        padding-left: 5px;
      }
    }

    .featureArea {
      width: $featureAreaWidth;
      display: flex;
      justify-content: flex-end;
      color: white;

      div {
        width: $iconSize;
        height: $iconSize;
        line-height: $iconSize;
        text-align: center;
      }

      /* 最小化 最大化悬浮效果 */
      div:hover {
        background: #6fa8ff;
      }
      /* 关闭悬浮效果 */
      div:last-child:hover {
        background: red;
      }
    }
  }

  //   主体区域铺满剩余的整个宽、高度
  main {
    background: #e8eaed;
    width: 100%;
    height: calc(100vh - $titleHeight);
  }
}
</style>
